<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>任务显示界面</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css"/>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/css/todo.css" type="text/css"/>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap-datetimepicker.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap-datetimepicker.zh-CN.js" ></script>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap-datetimepicker.css" type="text/css"/>
				
		<script type="text/javascript">
			$(function() {
				$(".list-group a").click(function () {
					var classVal = $(this).attr("class");
					if (classVal.contains("all")) {
						$("a.active").each(function() {
							$(this).attr("class",$(this).attr("class").replace(" active",""))
						});
						getThings();
					}else {
						$(".list-group a[class='"+classVal+" active']").attr("class",classVal);
						$(".list-group .all").attr("class",$(".list-group .all").attr("class").replace("active",""));
					}
					$(this).addClass($(this).attr("class")+" active");
				});
				$('#datetimepickerstart').datetimepicker({
					language:  'zh-CN',
					autoclose: 1
				});
				$('#datetimepickerend').datetimepicker({
					language:  'zh-CN',
					autoclose: 1
				});
				$("#addForm").validate({
					errorClass:"valtips",
					errorElement:"span",
					rules:{
						"thing.thingname":{
							required:true
						},
						
						"ting.thingtype":{
							required:true
						},
						"thing.starttime":{
							required:true,
						},
						"thing.endtime":{
							required:true,
							valiDate:true
						}
					},
					messages:{
						"thing.thingname":{
							required:"请输入任务"
						},
						
						"ting.thingtype":{
							required:"请选择类型"
						},
						"thing.starttime":{
							required:"请选择开始时间"
						},
						"thing.endtime":{
							required:"请选择结束时间",
							valiDate:"结束时间不能早于开始时间"
						}
					},
					submitHandler:function (form) {
						submitForm();
					}
				});
				
				//自定义验证结束时间不能晚于开始时间
				$.validator.addMethod("valiDate",function(value, element) {
					var startTime = $("#datetimepickerstart").val();
					if (value < startTime) {
						return false;
					}else {
						return true;
					}
				},"结束时间不能早于开始时间");
				$('#myModal').modal({backdrop: 'static', keyboard: false,show:false});
			});
			
			function cancel() {
				$("#addForm")[0].reset();
			}
			
			//ajax提交表单
			function submitForm() {
				var param = $("#addForm").serialize();
				var url = "${pageContext.request.contextPath }/thing/thingAction!addThing.action";
				$.ajax({
					  type: "POST",
					  url: url,
					  dataType: "json",
					  data:param,
					  success:function(data) {
						if(data.status == 1){
							alert("添加成功");
							$("#myModal").modal("hide");
							$("#addForm")[0].reset();
							getThings(data);
						}
					  },
						error:function() {
							alert("保存出现错误！");
						}
					});
			}
			
			//将得到的结果展示
			function showResult(data) {
				var length = data.things.length;
				var pageUtils = data.pageUtils;
				
				//显示数据总数，总页数,及当前页数
				$("#total").text(pageUtils.total);
				$("#totalPages").text(pageUtils.totalPages);
				$("#pageNum").text(pageUtils.pageNum);
				
				var tbody = $("#thingTbody");
				$(tbody).empty();
				if (length == 0) {
					var tipTr = $("<tr></tr>");
					$("<td colspan='8'>暂时没有数据</td>").appendTo(tipTr);
					return;
				}
				for (var i = 0; i < length; i++) {
					var thing = data.things[i];
					var tr = $("<tr></tr>");
					
					//添加行序列
					$("<td class='thingValTd'>"+(i+1)+"</td>").appendTo(tr);
					var checkBoxCls = "checkFinish";
					var checkboxTd;
					if (thing.thingstatusboolean) {
						checkboxTd = $('<td class="thingValTd"><span class="glyphicon glyphicon-ok" thingid = "'+thing.id+'"></span></td>');
					}else {
						checkboxTd = $('<td class="thingValTd"><input type="checkbox" class="checkFinish" thingid = "'+thing.id+'"></td>');
					}
					
					$(checkboxTd).appendTo(tr);
					
					//加载值
					$("th[field]").each(function () {
						var fieldname = $(this).attr("field");
						var fieldValue = thing[fieldname];
						$("<td class='thingValTd' fieldname='"+fieldname+"' title="+fieldValue+">"+fieldValue+"</td>").appendTo(tr);
					});
					$("<td class='thingValTd' fieldname='id' fieldvalue="+thing.id+">详情</td>").appendTo(tr);
					
					tr.appendTo(tbody);
				}
			}
			
			//获取事物things
			function getThings(page) {
				if (page == 'undefined') {
					page="pageNum=1"
				}
				var condition = getSearchCondition();
				$.ajax({
					type:"GET",
					data:page+"&condition="+condition,
					url:"${pageContext.request.contextPath}/thing/thingAction!getThings.action",
					dataType:"json",
					success:function(data) {
						showResult(data);
						bindCheckEvent();
					},
					error:function() {
						alert("加载数据出现未知错误");
					}
				});
			}
			
			//加载下一页数据
			function getNextPage() {
				var pageNum = $("#pageNum").text();
				try{
					pageNum = Number(pageNum)+1;
				} catch(e) {
					alert("不能将pageNum转为数字");
				}
				data = "pageNum="+pageNum;
				getThings(data);
			}
			
			//加载下一页数据
			function getPrePage() {
				var pageNum = $("#pageNum").text();
				try{
					pageNum = Number(pageNum)-1;
					if (pageNum <= 0) {
						alert("已经是第一页了");
						return;
					}
				} catch(e) {
					alert("不能将pageNum转为数字");
				}
				data = "pageNum="+pageNum;
				getThings(data);
			}
			
			//给checkbox绑定事件
			function bindCheckEvent() {
				$("input[type='checkbox']").click(function() {
					if (confirm("是否确定完成该任务！")) {
						var thingid = $(this).attr("thingid");
						var checkTd = $(this).parent();
						$.ajax({
							type:"POST",
							data:"thingid="+thingid,
							url:"${pageContext.request.contextPath}/thing/thingAction!finishThingSingle.action",
							dataType:"json",
							success:function(data) {
								if (data.status == 1) {
									$(checkTd).empty();
									$("<span class='glyphicon glyphicon-ok'></span>").appendTo(checkTd);
									alert("操作成功！");
								}
							},
							error:function() {
								alert("出现未知错误！");
							}
						});
					}else {
						$(this).removeAttr("checked");
					}
				}); 
			}
			
			function getSearchCondition() {
				var condition={};
				$(".list-group a[class*='active']") .each(function() {
					var fieldName = $(this).attr("field");
					var val = $(this).attr("value");
					if (fieldName != undefined && val != undefined) {
						condition[fieldName] = val;
					}
				});
				if ($("#searchInput").val() != 'undefined' && $("#searchInput").val() != "") {
					condition[$("#searchInput").attr("name")] = $("#searchInput").val();
				}
				return JSON.stringify(condition);
			}
		</script>
	</head>
	<body onload="getThings()">
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
					<span class="navbar-brand">ToDo</span>
				</div>
				<div class="collapse navbar-collapse" >
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								${user.username }你好 <span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="${pageContext.request.contextPath }/user/userAction!personCenter.action" target="_blank">个人中心</a></li>
								<li><a href="${pageContext.request.contextPath }/user/userAction!goChangePassword.action">修改密码</a></li>
								<li><a href="${pageContext.request.contextPath }/user/userAction!logout.action">退出</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="search-con">
				<div class="list-group">
			  	<a href="javascript:void(0);" class="list-group-item all active">全部</a>	
				</div>
				<div class="list-group">
					<a href="javascript:void(0);" class="list-group-item time" value="today" field="starttime">今天</a>
					<a href="javascript:void(0);" class="list-group-item time" value="thisweek" field="starttime">本周</a>
					<a href="javascript:void(0);" class="list-group-item time" value="thismonth" field="starttime">本月</a>
				</div>
				<div class="list-group">
					<a href="javascript:void(0);" class="list-group-item status" value="1" field="thingstatus">已完成</a>
				  	<a href="javascript:void(0);" class="list-group-item status" value="0" field="thingstatus">未完成</a>
				</div>
				<div class="list-group">
					<a href="javascript:void(0);" class="list-group-item things-type" value="1" field="thingtype">重要紧急</a>
				 	<a href="javascript:void(0);" class="list-group-item things-type" value="2" field="thingtype">重要不紧急</a>
				 	<a href="javascript:void(0);" class="list-group-item things-type" value="3" field="thingtype">不重要紧急</a>
				 	<a href="javascript:void(0);" class="list-group-item things-type" value="4" field="thingtype">不重要不紧急</a>
				</div>
				<div class="form-group">
					<input type="text" placeholder="请输入关键词" id="searchInput"  name="keyword"/>
				</div>
				<div class="btnDiv">
					<button type="button" id="searchBtn" onclick="getThings()" class="btn btn-sm btn-success">搜索</button>
				</div>
			</div>
			
			<div class="thingContainer">
				<button type="button" class="btn btn-default btn-sm addBtn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">添加任务</button>
				<table class="table table-hover thingTable">
					<thead>
						<tr>
							<th>序号</th>
							<th>完成</th>
							<th class="things" field="thingname">任务</th>
							<th field="starttime">开始时间</th>
							<th field="endtime">结束时间</th>
							<th field="thingstatus">完成状态</th>
							<th field="thingtype">任务类型</td>
							<th>详情</td>
						</tr>
					</thead>
					<tbody id="thingTbody">
					</tbody>
				</table>
			</div>
			<div id="pageDiv">
				<table id="pageTable">
					<tr>
						<td  style="text-align: right;width:50%">
							<a href="javascript:void(0);" class="btn btn-primary btn-xs" role="button" onclick="getPrePage()">上一页</a>
						</td>
						<td  style="text-align: left; padding-left:30px;">
							<a href="javascript:void(0);" class="btn btn-primary btn-xs" role="button" onclick="getNextPage()">下一页</a>
						</td>
						<td  style="text-align: right;width:40%;">
							<h5>共有<span id="total"></span>条数据，共<span id="totalPages"></span>页，当前第<span id="pageNum"></span>页</h5>
						</td>
					</tr>
				</table>
			</div>
			<div class="modal fade bs-example-modal-sm" id="myModal" >
			  <div class="modal-dialog modal-sm">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">添加任务</h4>
			      </div>
			      <div class="modal-body">
			        <form id="addForm">
			        	<table>
			        		<tr>
			        			<td>项目任务：</td>
			        			<td><textarea name="thing.thingname" style="resize:none"></textarea></td>
			        		</tr>
			        		<tr>
			        			<td>开始时间：</td>
			        			<td><input type="text" name="thing.starttime" readonly="readonly" id="datetimepickerstart" data-date-format="yyyy-mm-dd hh:ii"></td>
			        		</tr>
			        		<tr>
			        			<td>结束时间：</td>
			        			<td><input type="text" name="thing.endtime" readonly="readonly" id="datetimepickerend" data-date-format="yyyy-mm-dd hh:ii"></td>
			        		</tr>
			        		<tr>
			        			<td>任务类型：</td>
			        			<td>
			        				<select name="thing.thingtype" id="thingtypeinput">
			        					<option></option>
			        					<option value="1">重要紧急</option>
			        					<option value="2">重要不紧急</option>
			        					<option value="3">不重要紧急</option>
			        					<option value="4">不重要不紧急</option>
			        				</select>
			        			</td>
			        		</tr>
			        		<tr>
			        			<td style="text-align: center;" colspan="2">
							        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="cancel()">取消</button>
							        <button type="submit" class="btn btn-primary" >保存</button>
			        			</td>
			        		</tr>
			        	</table>
			        </form>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div>
		</div>
	</body>
</html>
